<template>
	<div class="notice">
		<div class="item" v-for="item in noticeList" :key="item.id" @click="goDetail(item.id)">
			<div class="left">
				<image :src="item.coverImageUrl" alt="" />
			</div>
			<div class="right">
				<div class="title">{{ item.title }}</div>
				<div class="content">
				{{item.summary}}
				</div>
				<div class="time">{{item.createTime}}</div>
			</div>
		</div>
		<div class="tip" v-if="total===noticeList.length">没有数据了</div>
	</div>
</template>

<script>
import { getAnnouncementsList } from '../../api/announcements/announcements';
export default {
	data() {
		return {
			pageNum: 1,
			timer: null,
			total: 0,
			noticeList: []
		};
	},
	created() {
		this.getAnnouncementsList();
	},
	methods: {
		async getAnnouncementsList() {
			const { rows, total } = await getAnnouncementsList(this.pageNum, 10);
			console.log(rows, total);
			this.noticeList = this.noticeList.concat(rows);
			this.total = total;
		},
		goDetail(id){
			uni.navigateTo({
			  url: `/pages/common/detail/index?id=${id}&title=详情`
			})
		}
	},
	onReachBottom() {
		// 触发加载更多数据
		if (this.timer !== null || this.noticeList.length>=this.total) return
		this.timer=setTimeout(()=>{
			console.log("发送请求")
			this.pageNum+=1
			this.getAnnouncementsList()
			clearTimeout(this.timer)
			this.timer=null
		},500)
	}
};
</script>

<style lang="less" scoped>
.notice {
	// background-color: red;
	padding: 20rpx 10rpx;
	.item {
		height: 200rpx;
		border-radius: 30rpx;
		background-color: #fff;
		// background-color: blue;
		margin-bottom: 20rpx;
		display: flex;
		.left {
			height: 200rpx;
			width: 200rpx;
			padding: 15rpx;
			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.right {
			width: calc(100% - 220rpx);
			padding: 10rpx;
			// background-color: green;
			.title {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 40rpx;
				// background: blue;
			}
			.content {
				width: 100%;
				height: 100rpx;
				line-height: 50rpx;
				// background-color: red;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; /* 控制显示的行数 */
				-webkit-box-orient: vertical;
			}
			.time {
				height: 30rpx;
				// background-color: yellow;
				text-align: end;
				padding-right: 30rpx;
			}
		}
	}
	.tip {
		margin: 20rpx;
		text-align: center;
		font-size: 40rpx;
		color: #0a4d68;
	}
}
</style>
